<!doctype html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>常用组件</title>
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

		<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
		<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
		<!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.cn/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.cn/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
	</head>
	<body>
		<div id="lizhili">
		  <ul class="tabs">
		    <li class="active">Home</li>
		    <li>Profile</li>
		    <li>Messages</li>
		    <li>Settings</li>
		  </ul>
		  <div class="tab-body">
		    <div class="tab-item active">111</div>
		    <div class="tab-item">222</div>
		    <div class="tab-item">333</div>
		    <div class="tab-item">4444</div>
		  </div>
		
		</div>
		<div id="lizhili1">
		  <ul class="tabs">
		    <li class="active">Home</li>
		    <li>Profile</li>
		    <li>Messages</li>
		    <li>Settings</li>
		  </ul>
		  <div class="tab-body">
		    <div class="tab-item active">111</div>
		    <div class="tab-item">222</div>
		    <div class="tab-item">333</div>
		    <div class="tab-item">4444</div>
		  </div>
		
		</div>
		<style>
			#kk{
				width: 500px;
				margin: 50px auto;
			}
			#kk1{
				width: 500px;
				margin: 50px auto;
			}
			.tabs{
				border-bottom:1px solid #00aaff ;
			}
			
			.tabs li{
				display: inline-block;
				line-height: 2;
				font-size: 20px;
				padding: 0 10px;
				margin: 0 10px;
			}
			.tabs .active{
				background-color: #00aaff;
				transition: all .5s;
				color: white;
			}
			.tab-body .tab-item{
				display: none;
			}
			.tab-body .active{
				display: block;
			}
		</style>


		<script src="https://lib.baomitu.com/jquery/3.6.0/jquery.min.js"></script>
		<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
		<script src="js/lizhili.js"></script>
		<script>
			$('#lizhili').cut({
				type:'click'//点击效果
			})
			$('#lizhili1').cut({
				type:'hover'//滑动效果
			})
			
			
		</script>


	</body>
</html>
